const path = require('path')

const webpack = require('webpack')

// 自动清除输出目录
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// 自动生成 html
const HtmlWebpackPlugin = require('html-webpack-plugin')

const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
    mode: 'production',
    entry: './src/main.js',
    output: {
        filename: '[contenthash:8].bundle.js',
        path: path.join(__dirname, 'dist')
        // publicPath:'dist/'
    },
    optimization: {},
    module: {
        rules: [
            // 处理js
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.(js|vue)$/,
                exclude: /node_modules/,
                use: 'eslint-loader',
                enforce: 'pre'
            },
            // 处理样式文件
            {
                test: /\.css$/,
                use: ['vue-style-loader', 'css-loader']
            },
            {
                test: /\.less$/,
                use: ['vue-style-loader', 'css-loader', 'less-loader']
            },

            // 处理图片
            {
                test: /\.png|jpe?g|gif$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        esModule: false,
                        limit: 10 * 1024 // 10 KB
                    }
                }
            },

            // 处理vue文件
            {
                test: /\.vue$/,
                use: 'vue-loader'
            }
        ]
    },

    plugins: [
        new CleanWebpackPlugin(),

        new VueLoaderPlugin(),

        // 用于生成index.html
        new HtmlWebpackPlugin({
            title: 'Webpack Plugin Sample',
            template: './public/index.html'
        })

    ]
}
